<template>
  <div class="home">
    <div class="profile-container">
      <div class="profile-image">
        <img :src="profileImage" alt="余承东头像">
      </div>
      <div class="profile-info">
        <h1>余承东</h1>
        <p class="title">华为常务董事、终端BG董事长</p>
        <div class="profile-meta">
          <div class="meta-item">
            <span class="icon">🎂</span>
            <span>1969年生于安徽省六安市霍邱县</span>
          </div>
          <div class="meta-item">
            <span class="icon">🎓</span>
            <span>清华大学无线通信系研究生</span>
          </div>
          <div class="meta-item">
            <span class="icon">💼</span>
            <span>1993年加入华为</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bio-section">
      <h2>个人简介</h2>
      <p>余承东出生于1969年，是安徽省六安市霍邱县人。1987年，以全县高考理工科第一名的成绩，成功考上西北工业大学。毕业两年后，考上清华大学无线通信系的研究生。1993年加入华为，从底层技术员做起，历任多个重要职位。</p>
      <p>目前担任华为常务董事、终端BG董事长，曾主导华为终端业务转型、鸿蒙系统研发及智能汽车业务等多个关键战略项目。在其带领下，华为手机曾取得国内销量第一、全球销量第二的成绩。</p>
    </div>
    
    <div class="quick-links">
      <router-link to="/experience" class="link-card">
        <h3>职业经历</h3>
        <p>了解余承东的华为历程</p>
      </router-link>
      
      <router-link to="/honors" class="link-card">
        <h3>荣誉成就</h3>
        <p>查看所获荣誉与奖项</p>
      </router-link>
      
      <router-link to="/activities" class="link-card">
        <h3>社会活动</h3>
        <p>社会活动与演讲</p>
      </router-link>
      
      <router-link to="/positions" class="link-card">
        <h3>职务任免</h3>
        <p>历任职位变动</p>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import profileImage from '../assets/images/profile.jpg'
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.profile-container {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3rem;
}

.profile-image img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-info h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #1a1a1a;
}

.profile-info .title {
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 1.5rem;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.meta-item .icon {
  font-size: 1.25rem;
}

.bio-section {
  margin-bottom: 3rem;
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
}

.bio-section h2 {
  margin-bottom: 1rem;
  color: #1a1a1a;
}

.bio-section p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #333;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.link-card {
  padding: 1.5rem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.link-card h3 {
  margin-bottom: 0.5rem;
  color: #1a1a1a;
}

.link-card p {
  color: #666;
}

@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .profile-meta {
    align-items: center;
  }
}
</style>
